<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		
		
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<image src="../../static/back.png" mode="aspectFill" @click="tapToBack('back')"></image>
			</view>
			<view class="title">会员中心</view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		<!-- 个人信息 -->
		<view class="information">
			<view class="left">
				<image src="https://imgs.ynz666.com/test/2025/01/08/MzQ3MGEyMWE3NzYwNmM4N2Y2M2VjNGRkZWJhNGNhMzA=.png" mode="aspectFill" class="img"></image>
				<view class="detail">
					<view class="name">
						欢迎你来
					</view>
					<view class="desc">
						开启商圈消费新方式，消费省钱还赚钱
					</view>
				</view>
			</view>
			
			<view class="right">
				
			</view>
		</view>
		
		<view class="member">
			<view class="member_box">
				<view class="title">
					<view class="top">
						开通休闲吧会员，早买早享受
					</view>
					<view class="bottom">
						畅享团购省钱，额外0元享权益还能赚<text class="fontColor">积分当钱花</text>
					</view>
					<view class="dw_rule" @click="openRule">
						<image src="../../static/jf/img8.png" mode="widthFix" class="img"></image>
						会员规则
						
					</view>
				</view>
				<view class="con">
					<view class="item" :class="index==navIndexOne?'item item_active':'item'" v-for="(item,index) in navOneList" :key="index"
						@click="navClickOne(item,index)">
						<view class="price">
							<view class="view1">
								¥ 
							</view>
							<view class="view2">
								{{item.price}}
							</view>
						</view>
						<view class="desc" v-if="item.cardType==1">
							尝鲜
						</view>
						<view class="desc" v-if="item.cardType==2">
							超值
						</view>
						<view class="desc" v-if="item.cardType==3">
							畅玩
						</view>
						<view class="type">
							<view class="view1">
								{{item.memberDays}}
							</view>
							<view class="view2" v-if="item.cardType==1">
								天月卡
							</view>
							<view class="view2" v-if="item.cardType==2">
								天季卡
							</view>
							<view class="view2" v-if="item.cardType==3">
								天年卡
							</view>
						</view>
						<view class="date">
							额外送{{item.extraDays}}天时长
						</view>
						
						<view class="btn">
							
						</view>
					
						<image src="https://imgs.ynz666.com/test/2025/01/08/NzM3ZmUxNmIyMWIwZjQyM2U3Yzg1ZjVjMTI0Mjc0OTU=.png" mode="aspectFill" class="btn" v-if="index==navIndexOne"></image>
						
						<view class="recommend" v-if="index==1">
							众多用户推荐
						</view>
					</view>
				</view>
				<view class="fot">
					<!-- <view class="left">
						赠好友
					</view> -->
					<view class="right" @click="buyCoupon">
						去开通
					</view> 
				</view>
				<view class="user-privacy" @click="checkMed">
					<image v-if="!activeRadio" src="../../static/mine/checkoff.png" mode="aspectFill"></image>
					<image v-else src="../../static/mine/is_qiandao.png" mode="aspectFill"></image>
					<view>点击购买即表示同意<text @tap.stop="JumpPage('agreement')" >《下楼休闲吧会员服务协议》</text></view>
				</view>
			</view>
		</view>
		
		<view class="privilege">
			<view class="privilege_box">
				<view class="title">
					下楼休闲吧会员专享特权
				</view>
				<view class="con">
					<view class="item item1">
						<image src="../../static/mine/hyimg1.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								享会员免费特权
							</view>
							<view class="desc">
								0元享吃喝玩乐
							</view>
						</view>
					</view>
					<view class="item item2">
						<image src="../../static/mine/hyimg2.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								消费可以赚积分
							</view>
							<view class="desc">
								积分可以当钱花
							</view>
						</view>
					</view>
					<view class="item item3">
						<image src="../../static/mine/hyimg3.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								分享团购赚佣金
							</view>
							<view class="desc">
								立即到账，随时提现
							</view>
						</view>
					</view>
					<view class="item item4">
						<image src="../../static/mine/hyimg4.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								专属1对1客服
							</view>
							<view class="desc">
								专人对接
							</view>
						</view>
					</view>
					<view class="item item5">
						<image src="../../static/mine/hyimg5.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								优先体验特权
							</view>
							<view class="desc">
								新活动优先体验
							</view>
						</view>
					</view>
					<view class="item item6">
						<image src="../../static/mine/hyimg6.png" mode="aspectFill" class="img"></image>
						<view class="item_right">
							<view class="name">
								专属会员邀请码
							</view>
							<view class="desc">
								邀请会员赚现金
							</view>
						</view>
					</view>
				</view>
				<view class="fot">
					更多会员特权及权益更新中
				</view>
			</view>
		</view>
		
		
		<view class="rulemask" v-if="ruleModal">
			<view class="ruleModal_box">
				<view class="fri_box">
					<view class="top">
						月卡会员规则
					</view>
					<view class="bot">
						<view>1.兑换免单
						免单兑换每项免单兑换时间为1个月
						举例：兑换1项免单后，再次兑换需要过30天后才可继续兑换</view>
						<view>
							2.有效期
							激活后30天内有效
						</view>
						<view>
							3.有效期内额外权益
							分享团购后分享的用户下单可获得佣金
							锁定用户成为会员享受购买会员佣金
						</view>
						<view>
							4.购买会员此会员购买完成不可退款
						</view>
						
		
					</view>
					
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		</view>
		
	</view>
</template>

<script>
	import {
		apiOrderGoodsBuy,apiOperationMemberCard
	} from '../../apis/my.js';
	var app = getApp();	
	import gongType from '@/utils/debounce.js'
	import loading from '../../components/loading/loading.vue';
	export default {
		data() {
			return {
				loading:true,
				statusBarHeight :0,
				titleBarHeight : 0,
				bottomTabbar :0,
				scrollFlag:false,
				navIndexOne:0,
				navOneList:[
					{
						price:99,
						desc:'尝鲜',
						typeO:'30',
						typeT:'天月卡',
						date:'额外送3天时长',
						id:0
					},
					{
						price:279,
						desc:'超值',
						typeO:'90',
						typeT:'天季卡',
						date:'额外送7天时长',
						id:1
					},
					{
						price:99,
						desc:'畅玩',
						typeO:'365',
						typeT:'天年卡',
						date:'额外送30天时长',
						id:2
					},
				],
				activeRadio:false,
				
				timestamp:'',
				memberCardId:'',
				joinProductId:'',//商品id
				ruleModal:false,
			}
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +uni.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onLoad(options){
			
			if(options.joinProductId){
				this.joinProductId=options.joinProductId
			}
			
			this.operationMemberCard();
		},
		onShow() {
			
		},
		methods: {
			openRule(){
				this.ruleModal = true;
			},
			// 关闭海报弹框
			closeMask() {
				this.ruleModal = false;
			},
			// 获取会员卡列表
			operationMemberCard(){
				apiOperationMemberCard().then(res=>{
					this.navOneList=res.data.list
					
					this.memberCardId=res.data.list[this.navIndexOne].id
					this.loading=false
				})
			},
			// 返回按钮
			tapToBack(page) {
				console.log(page,"111")
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					break;
				}
			},
			// 立即开通
			buyCoupon:gongType.debounce(function (e){
				
				
				
				let that = this;
				if(!that.activeRadio){
					uni.showToast({
						title:'请点击下方同意购买',
						icon:'none'
					})
					return;
				}
				let data={
					productId:'',
					qty:1,
					tel:'',
					memberCardId:that.memberCardId,
					joinProductId:that.joinProductId,
				}
				apiOrderGoodsBuy(data).then(payment=>{
					switch(payment.code){
						case 0:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									uni.navigateBack({
										delta:1
									})
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
			}, 1000),
			
			navClickOne(item, index){
				this.navIndexOne = index
				this.memberCardId=item.id
			},
			checkMed(){
				this.activeRadio = !this.activeRadio;			
			},
			// 跳转页面
			JumpPage(page){
				switch(page){
					case "index":
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'agreement':
						uni.setStorageSync('webUrl','https://p.xiuxian.xialoukeji.com/xiuxianVipTips.html');
						uni.navigateTo({
							url:`/pages/agreement/agreement`
						})
					break;
					default:
						uni.navigateTo({
							url:`../${page}/${page}`
						})
					break;
				}
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	
	width: 100%;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 622rpx;
		z-index: -1;
		background: linear-gradient( #FFD3DB,#fff);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 33rpx;
				height: 33rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}
	
	.information{
		margin: 20rpx 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}
			.detail{
				padding-left: 16rpx;
				.name{
					font-weight: bold;
					font-size: 40rpx;
					color: #333333;
				}
				.desc{
					font-size: 22rpx;
					color: #333333;
					padding-top: 8rpx;
				}
			}
		}
		.right{
			font-size: 30rpx;
			color: #333333;
		}
	}
	
	.member{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.member_box{
			padding: 24rpx 20rpx 28rpx;
			background: #fff;
			border-radius: 20rpx;
			.title{
				padding: 0 6rpx;
				position: relative;
				.top{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					.fontColor{
						color: #FF1D2B;
					}
				}
				.bottom{
					padding-top: 8rpx;
					font-size: 24rpx;
					color: #3A3134;
					.fontColor{
						color: #FF1D2B;
					}
				}
				.dw_rule{
					position: absolute;
					top: 0;
					right: 0;
					font-size: 26rpx;
					color: #666;
					display: flex;
					align-items: center;
					.img{
						width: 29rpx;
						height: 20rpx;
						margin-right: 4rpx;
					}
				}
			}
			.con{
				padding-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					width: 208rpx;
					height: 280rpx;
					background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
					border-radius: 20rpx;
					border: 2rpx solid rgba(255,76,76,0.1);
					position: relative;
					.price{
						display: flex;
						align-items: baseline;
						padding: 32rpx 0 0 34rpx;
						.view1{
							font-size: 22rpx;
							color: #310D09;
						}
						.view2{
							font-size: 36rpx;
							color: #310D09;
							padding-left: 4rpx;
							font-weight: bold;
						}
					}
					.desc{
						font-size: 24rpx;
						color: #310D09;
						font-weight: bold;
						padding:16rpx 0 0 34rpx;
					}
					.type{
						color: #310D09;
						font-weight: bold;
						padding: 6rpx 0 14rpx 34rpx;
						display: flex;
						align-items: baseline;
						.view1{
							font-size: 48rpx;
						}
						.view2{
							font-size: 24rpx;
						}
					}
					.date{
						width: 212rpx;
						height: 54rpx;
						background: linear-gradient( 270deg, #FF8746 0%, #FF3F30 100%);
						border-radius: 0rpx 0rpx 20rpx 20rpx;
						position: absolute;
						bottom: 0;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.btn{
						position: absolute;
						top: 32rpx;
						right: 26rpx;
						width: 36rpx;
						height: 36rpx;
						border: 3rpx solid #C7C7C7;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.recommend{
						width: 148rpx;
						height: 36rpx;
						background: linear-gradient( 180deg, #FE344C 0%, #FF7D57 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(237,128,128,0.48);
						border-radius: 0rpx 20rpx 20rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 20rpx;
						color: #FFFFFF;
						position: absolute;
						top: -18rpx;
						left: 30rpx;
					}
				}
				.item_active{
					border: 2rpx solid #FF3F30;
					.btn{
						
						background: linear-gradient( 180deg, #FF8947 0%, #FF4F45 100%);
						border: 3rpx solid #FF3F30;
						color: #fff;
						font-size: 22rpx;
						font-weight: bold;
					}
				}
			}
			.fot{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 222rpx;
					height: 84rpx;
					background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
					border-radius: 42rpx;
					border: 2rpx solid rgba(255,182,182,0.3);
					font-weight: bold;
					font-size: 28rpx;
					color: #310D09;
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: center;
					// width: 420rpx;
					width: 100%;
					height: 82rpx;
					background: linear-gradient( 270deg, #FC9729 0%, #FF2125 100%);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,45,41,0.28), inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 42rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
			.user-privacy {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 24rpx 24rpx 0 0 ;
				padding: 20rpx 0 0;
				text-align: center;
				font-size: 20rpx;
				color: #ABABAB;
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 8rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
	.privilege{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.privilege_box{
			padding: 24rpx 20rpx 28rpx;
			background: #fff;
			border-radius: 20rpx;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				color: #242321;
			}
			.con{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 324rpx;
					height: 108rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					.img{
						width: 56rpx;
						height: 56rpx;
						margin-left: 34rpx;
					}
					.item_right{
						padding-left: 10rpx;
						.name{
							font-weight: bold;
							font-size: 26rpx;
							color: #310D09;
						}
						.desc{
							font-weight: bold;
							font-size: 20rpx;
							color: #7F3628;
							padding-top: 4rpx;
						}
					}
				}
				.item1{
					background: linear-gradient( 180deg, #E5EFFF 0%, #F4F8FF 100%);
				}
				.item2{
					background: linear-gradient( 180deg, #FFEAD7 0%, #FFF9F3 100%);
				}
				.item3{
					background: linear-gradient( 180deg, #FFE8E8 0%, #FFF7F7 100%);
				}
				.item4{
					background: linear-gradient( 180deg, #DAF7F1 0%, #F2FDFA 100%);
				}
				.item5{
					background: linear-gradient( 180deg, #E3F9FF 0%, #F0FCFF 100%);
				}
				.item6{
					background: linear-gradient( 180deg, #FFEBEB 0%, #FFF6F6 100%);
				}
			}
			.fot{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	
}
.rulemask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	
		background-color: rgba(0, 0, 0, 0.65);
	
		
		.ruleModal_box {
			width: 648rpx;
			height: 855rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;
			.fri_img{
				width: 648rpx;
				height: 855rpx;
			}
			.fri_box{
				width: 648rpx;
				height: 855rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top {
					width: 100%;
					height: 164rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
				}
				.bot{
					height: 590rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow-y: auto;
					padding: 0 24rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
				
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 63rpx;
					height: 63rpx;
				}
			}
	
			
		}
	
		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;
	
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
	
			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}
	
			.left {
				left: 0;
			}
	
			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}
	
			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}
	
			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}
	
			.modal-btn {
				background-color: #FA6400;
			}
	
			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}
	
			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}
	
			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}
	
			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
	
			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
	
				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}

</style>
